<template>
	<section class="order-detail">
		<div class="border-b20 pl30rem pr30rem pb30rem pt30rem" style="line-height: 1.5rem">
			<strong class="cxo-red-color mb20rem">{{order_status_info.message}}</strong>
		</div>
		<div class="pb50rem">		
			<ul class="c666 pl30rem pr30rem pb60rem mb20rem" v-if="order_list">
				<li class="border-b pt30rem pb30rem">
					<p class="layout mb10rem">
						<span>
						收货人：{{order_list.address.name}}</span>
						</span>
						<span>
							{{order_list.address.mobile}}
						</span>
					</p>
					<p class="layout">
						收货地址：{{order_list.address.address}}
					</p>
				</li>
				<li class="border-b pt20rem pb20rem">
					<i class="iconfont icon-dianpu-copy fs18 bold cxo-red-color"></i>	
					{{order_list.shop_name}}				
				</li>
				<template v-for="item in order_list.order">
					<router-link tag="li" :to="item.url" class="border-b pt20rem pb20rem">
						<div class="layout">
							<img :src="img_url+item.pic" alt="商品图片" class="order-img">
							<div class="ml10rem">
								{{item.goods_name}}
							</div>
							<div class="align-right">
								￥&nbsp;{{item.order_money}}
								<p>
									×{{item.num}}
								</p>
							</div>						
						</div>	
					</router-link>				
				</template>
				<li class="layout pt10rem pb10rem" v-for="item in order_list.extend">
					<small>{{item.name}}</small>
					<span>￥&nbsp;{{item.desc}}</span>
				</li>	
				<li class="strong border-b layout pt20rem pb20rem black">
					<span>{{order_list.order_total_name}}</span>
					<span>￥&nbsp;{{order_list.order_total_price}}</span>
				</li>
				<li class="strong border-b layout pt20rem pb20rem black">
					<span>{{order_list.pay_name}}</span>
					<span>￥&nbsp;{{order_list.pay_total_price}}</span>
				</li>
				<li class="layout pb10rem pt10rem" v-for="item in order_list.bottom"> 
					<small>{{item.name}}:</small>
					{{item.desc}}
				</li>				
			</ul>
		</div>
		<!-- <button 
			@click="deleteOrder" 
			class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn radius fr mt40rem mr30rem"
		>
			删除订单
		</button> -->
	<!-- 	<router-link tag="button" :to="'/member/order/EvaluateEdit?order_id=' + order_id"
			class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn radius fr mt40rem mr30rem"
		>
			评价晒单
		</router-link> -->
		<footer class="commodity-footer bg-white layout border-t align-center ">
			<span class="w50 fs24rem c666 pl15rem pr15rem border-r" @click="contractService()">联系客服</span>
			<span class="btn-text w50 fs24rem c666 pl15rem pr15rem" @click="tel()"><a :href="'tel:'+phoneMess">拨打电话</a></span>
		</footer>	
	</section>
</template>

<script>
	import { orderDetail,delOrder } from "@/api/ordering";
	import Modal  		   from '@/utils/modal';
	import $toast from "@/utils/toast";
	import { getShopTel } from '@/api/member';
	export default
	{
		data()
		{
			return{
				uid  	   : localStorage.getItem('uid'),
				order_id   : this.$route.query.order_id,
				order_list : null,
				address_list: [],
				img_url	   : process.env.IMG_URL,
				phoneMess  : '',
				shop_id	   : '',
				order_status_info 	   : {},
				//url        : '',
			}
		},	
		created()
		{
			this.loadData();
			this.tel();
		},
		methods:
		{
			loadData()
			{
				orderDetail(this.uid, this.order_id).then( res => {
					this.order_list  = res.data;
					this.shop_id = res.data.order[0].shop_id;
					this.order_status_info = res.data.top;
					for( var i in this.order_list.order ) {
						var orderMark = this.order_list.order[i];
						if ( orderMark.activity_cate == 4 ) {

							this.url = '/ordering/detail/Group-detail/'	
						} else {

							if ( orderMark.status== 0 ) {
								this.url =  '/mall/Mall-detail/';
							} else if ( orderMark.status == 2 ) {
								this.url = '/ordering/detail/Commodity-detail/';
							}
						}
						this.order_list.order[i].url = this.url+this.order_list.order[i].goods_id;
					}
					
				})
			},
			deleteOrder()
			{
				Modal.confirm("确定删除订单吗？","提示").then(res=>{
					delOrder(this.uid,this.order_id).then(res => {
						$toast("删除成功");
						this.$router.replace('/member/order?status=all');
					})
				});	
			},
			contractService() {
				$toast('该功能暂未开通')
			},
			tel() {
				getShopTel(this.shop_id).then ( res => {
					if ( res.data.code == 1) {
						$toast(res.data.msg);
					} else {
						this.phoneMess = res.data.shop_phone;
					}
				})
			}
		}
	}
	
</script>

<style lang="less">
.order-detail{
	.order-img{
		width: 200/28rem;
		height: 200/28rem;
		object-fit: cover;
	}
	.delete-btn{
		color: #333333;
		border: 1px solid #333333;
	}
	.assess-btn{
		color: #ff0036;
		border: 1px solid #ff0036;
	}
	footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 3rem;
	}
}

</style>